<template>
  <div class="codeAuthentication">
    <x-header v-show="!isWeChar">
      <div slot="default" class="common__header--title">业务关系代码</div>
      <div @click="goBack" slot="overwrite-left"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
    </x-header>
    <div class="codeAuthentication_inputDiv">
      <x-input v-show="oldAgreementNo.length>0" v-model="oldAgreementNo" text-align="right" readonly>
        <span slot="label" style="display:block;">业务关系代码：</span>
      </x-input>
      <x-input v-show="oldAgreementName.length>0" v-model="oldAgreementName" text-align="right" readonly>
        <span slot="label" style="display:block;">单位名称：</span>
      </x-input>
      <x-input v-show="oldSaleCode.length>0" v-model="oldSaleCode" text-align="right" readonly>
        <span slot="label" style="display:block;">销售人员编码：</span>
      </x-input>
      <x-input v-show="oldSaleName.length>0" v-model="oldSaleName" text-align="right" readonly>
        <span slot="label" style="display:block;">销售人员姓名：</span>
      </x-input>
    </div>
    <!-- <div v-show="showDiv" class="codeAuthentication_inputDiv">
      <x-input v-model="dto.agreementNo" :max="20 " placeholder="请输入业务关系代码" required>
      </x-input>
      <x-input v-model="imgCode" :max="StrLenth.img" placeholder="请输入图形码" required>
        <span slot="right" class="img__code--change" @click="changeImgCode()">换一张</span>
        <img slot="right" class="img__code" :src="imgCodeSrc " @click="changeImgCode()">
      </x-input>
      <div v-show="haveError" class="codeAuthentication_errorMsg">
        <badge text="!"></badge>
        <span>{{errorMessage}}</span>
      </div>
    </div> -->
    <!-- 选择销售人员 -->
    <!-- <group v-show="showSaleNameDiv" class="codeAuthentication_inputDiv">
      <selector placeholder="请选择销售人员" v-model="selectValue" :options="sealesPersos"></selector>
    </group> -->
    <!-- 需要输入业务关系代码时或销售人员不为空时显示"立即认证"按钮 -->
    <!-- <x-button v-show="!showDiv && !showSaleNameDiv" :text="(oldAgreementNo.length>0)?'立即更新':'立即认证'" @click.native="openDiv" type="primary" class="codeAuthentication_process_btn"></x-button> -->
    <!-- 提交业务关系代码查询 -->
    <!-- <x-button v-show="showDiv" text="下一步" @click.native="onNext" type="primary" class="codeAuthentication_process_btn"></x-button> -->
    <!-- 提交选择销售人员信息 -->
    <!-- <x-button v-show="showSaleNameDiv" text="下一步" @click.native="subInfo" type="primary" class="codeAuthentication_process_btn"></x-button> -->
    <!-- 最终提示信息3000=3秒 -->
    <!-- <toast v-model="showToast" :type="toastType" position="default" :time="2000">{{showToastText}}</toast> -->
  </div>
</template>
<script>
import { XHeader, Group, XInput, XButton, Badge, Toast, Alert, AlertPlugin, Selector, TransferDomDirective as TransferDom } from "vux";
import { RouteUrl, Mutations, StrLenth } from "src/common/const";
import { RequestUrl } from "src/common/url";
import { mapState } from "vuex";

export default {
  directives: {
    TransferDom
  },
  components: { XHeader, Group, XInput, XButton, Badge, Toast, Alert, AlertPlugin, Selector },
  computed: mapState(["user", "isWeChar"]),
  data() {
    return {
      StrLenth: {}, //字符长度常量
      toastType: "warn",//提示信息类型
      showToastText: "",//提示内容
      showToast: false, //显示最终保存提示
      oldAgreementNo: "", //原关系代码
      oldAgreementName: "", //原关系代码单位名称
      oldSaleCode: "", //原销售人员编码
      oldSaleName: "", //原销售人员名称
      showDiv: false, //是否显示关系代码输入区
      showSaleNameDiv: false,//是否显示销售人员名称和编码的提交按钮
      sealesPersos: [],
      selectValue: '',//默认绑定选项值
      imgCodeSrc: RequestUrl.GET_VALIDATE_CODE, //验证码图片路径
      imgCode: "", //图形码
      dto: {
        agreementNo: "", //输入的关系代码
        saleName: "",//默认为空
        saleVocationCardNo: ""//默认为空
      },
      displayInfo: "",//弹窗提示内容
      haveError: false,
      errorMessage: ""
    };
  },
  methods: {
    //返回
    goBack() {
      this.$common.goBackUrl(this, RouteUrl.ACCOUNT);
    },
    //更换图形码
    changeImgCode() {
      this.imgCodeSrc = RequestUrl.GET_VALIDATE_CODE + "?a=" + Math.random();
    },
    //打开输入
    openDiv() {
      this.showDiv = true;
    },
    //提交业务关系代码查询
    onNext() {
      this.setError(false, "");
      if (this.$common.isEmpty(this.dto.agreementNo) || this.$common.isEmpty(this.imgCode)) {
        this.valCellInput();//触发焦点事件
        return;
      }
      if (!this.$common.isEmpty(this.dto.agreementNo) && this.dto.agreementNo === this.user.userDto.agrementNo) {
        this.showToastText = "请使用新业务关系代码";
        this.showToast = true;
        return;
      }
      let data = { TYPE: "FORM", imgCode: this.imgCode, agreementNo: this.dto.agreementNo };
      let _this = this;
      _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, true);
      _this.$http.post(RequestUrl.FIND_BY_AGREEMENT_NO_IMG, data).then(function (res) {
        _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, false);
        if (res.state != 0) {
          _this.changeImgCode();//更换图形验证码
          _this.setError(true, res.result);
          return;
        }
        //查询到业务关系代码
        _this.showDiv = false;//隐藏认证界面
        //获取弹窗显示方式和内容
        _this.displayInfo = _this.getShowText(res.result.prpLmAgentList[0]);
        //非四川和广东地区无需选择代销人员
        if (!res.result.selectSalePerson) {
          //直接显示提交修改
          _this.showSaleNameDiv = false;
          _this.showPlugin(_this, false);
          return;
        }
        //查询机构信息来匹配销售人员信息
        data = { TYPE: "FORM", agreementNo: _this.dto.agreementNo };
        _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, true);
        _this.$http.post(RequestUrl.FIND_SEALES_PERSOS, data).then(function (res) {
          _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, false);
          if (res.state == 0 && !_this.$common.isEmpty(res.result)) {
            //有销售人员信息
            for (var i = 0, l = res.result.sealesPersos.length; i < l; i++) {
              let name = res.result.sealesPersos[i].saleName;//销售人员名称
              let code = res.result.sealesPersos[i].saleVocationCardNo;//销售人员编码
              if (_this.$common.isEmpty(name)) {
                _this.showToastText = "请配置销售人员名称";
                _this.showToast = true;
                return;
              }
              if (_this.$common.isEmpty(code)) {
                _this.showToastText = "请配置销售人员编码";
                _this.showToast = true;
                return;
              }
              let obj = { key: name + "," + code, value: name + "," + code };
              _this.sealesPersos = [];
              _this.sealesPersos.push(obj);//销售人员列表
            }
            _this.showSaleNameDiv = true;//显示选择销售人员列表
            return;
          }
          //直接显示提交修改
          _this.showSaleNameDiv = false;
          _this.showPlugin(_this, false);
        });
      });
    },
    //获取弹窗显示方式和内容
    getShowText(agrObj) {
      // let agentCode = agrObj.agentCode;
      // let agentName = agrObj.agentName;
      // if (!this.$common.isEmpty(agentCode) || !this.$common.isEmpty(agentName)) {
      //   //个人代理和机构代理
      //   return "代理名称：" + agentName;
      // }
      // if (this.$common.isEmpty(agentCode) && this.$common.isEmpty(agentName)) {
      //   // 直销业务关系代码
      //   return "关系代码：" + agrObj.agreementNo;
      // }
      //----------------------------------------------------------------------------------------
      let type = agrObj.alternate1;//业务关系代码类型
      if (type == "1" || type == "2" || type == "3" || type == "4" || type == "i" || type == "k") {
        // 个人代理(1)和机构代理(2,3,4,i,k)
        return "代理名称：" + agrObj.agentName;
      } else if (type == "5" || type == "6") {
        // 直销(5,6)
        return "关系代码：" + agrObj.agreementNo;
      } else {
        // 内部员工(0)
        return "关系代码：" + agrObj.agreementNo;
      }
    },
    //提交选择销售人员信息
    subInfo() {
      if (this.$common.isEmpty(this.selectValue)) {
        this.showToastText = "请选择有效的销售人员";
        this.showToast = true;
        return;
      }
      this.dto.saleName = this.selectValue.split(",")[0];
      this.dto.saleVocationCardNo = this.selectValue.split(",")[1];
      //显示提交信息
      this.showPlugin(this, true);
      this.showSaleNameDiv = false;
    },
    //弹出显示确认信息
    showPlugin(_this, havePersons) {
      let html = "<div style='text-align: left;'>";
      html += "<p style='line-height: 25px;height: auto;'>" + _this.displayInfo + "</p>";
      if (havePersons) {
        html += "<p style='line-height: 25px;height: auto;'>销售人员：" + _this.dto.saleName + "</p>";
        html += "<p style='line-height: 25px;height: auto;'>销售代码：" + _this.dto.saleVocationCardNo + "</p></div>";
      }
      _this.$vux.confirm.show({
        title: "请确认信息",
        content: html, //显示内容
        showInput: false, //是否显示input
        hideOnBlur: true, //点击遮罩可关闭
        confirmText: "保存",
        cancelText: "取消",
        onCancel() { },
        onConfirm() {
          let data = {
            TYPE: "FORM",
            userCode: _this.user.userDto.userCode,
            agreementNo: _this.dto.agreementNo,//关系代码
            saleCode: _this.dto.saleVocationCardNo,//销售人员编码
            saleName: _this.dto.saleName//销售人员名称
          };
          //保存
          _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, true);
          _this.$http.post(RequestUrl.OPEN_STORE_BY_AGREEMENT, data).then(function (res) {
            _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, false);
            if (res.state != 0) {
              _this.showToastText = res.result;//提示内容
              _this.showToast = true;//显示提示信息
              return;
            }
            _this.showToastText = "保存成功";//提示内容
            _this.toastType = "success";//提示类型
            _this.showToast = true;//显示提示信息
            _this.oldAgreementNo = _this.dto.agreementNo;
            _this.oldAgreementName = _this.dto.agreementName;
            _this.oldSaleCode = _this.dto.saleName;
            _this.oldSaleName = _this.dto.saleName;
            //保存USER_INFO信息
            _this.$common.storeCommit(_this, Mutations.SAVE_USER_INFO, res.result);
          });
        }
      });
    },
    setError(flag, msg) {
      this.haveError = flag;
      this.errorMessage = msg;
    },
    //焦点事件
    valCellInput() {
      $(".weui-input").focus();
      $(".weui-input").blur();
    },
    initPage() {
      if (!this.user.isLogin) {
        this.$common.goUrl(this, RouteUrl.LOGIN);
      }
      if (this.$common.isEmpty(this.user.userDto.agrementNo)) {
        //显示认证界面
        this.showDiv = true;
        return;
      }
      this.oldAgreementNo = this.$common.isEmpty(this.user.userDto.agrementNo) ? "" : this.user.userDto.agrementNo;
      this.oldAgreementName = this.$common.isEmpty(this.user.userDto.agrementName) ? "" : this.user.userDto.agrementName;
      this.oldSaleCode = this.$common.isEmpty(this.user.userDto.saleCode) ? "" : this.user.userDto.saleCode;
      this.oldSaleName = this.$common.isEmpty(this.user.userDto.saleName) ? "" : this.user.userDto.saleName;
    }
  },
  mounted() {
    document.title = '业务关系代码认证';
    this.StrLenth = StrLenth; //字符长度常量
    this.$init.subPageInit(this);
    this.initPage();
  }
};
</script>
<style lang="scss" scoped>
//input区域
.codeAuthentication_inputDiv {
  margin: 15px auto;
  width: 95%;
  height: auto;
  border-radius: 5px;
  background-color: white;
  span {
    font-size: 14px;
  }
  .weui-cell {
    border-top: 1px solid #efefef;
  }
  .weui-cell:before {
    border-top: 0px;
  }
}

//图形码
.img__code {
  width: 80px;
  height: 31px;
  margin-left: 3px;
  vertical-align: middle;
}

//换一张图形码
.img__code--change {
  margin-left: 3px;
  vertical-align: middle;
  font-size: 14px;
}

//获取验证码按钮
.linkMobileCode {
  padding: 0px;
  width: 80px;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  color: #C8161D;
  border: 1px solid #C8161D;
  background-color: white;
}

.codeAuthentication_div {
  margin: 15px auto;
  width: 95%;
  height: auto;
  border-radius: 5px;
  background-color: white;
  span {
    font-size: 14px;
  }
}

//提交按钮
.codeAuthentication_process_btn {
  width: 95%;
  font-size: 20px;
}

//错误信息
.codeAuthentication_errorMsg {
  border-top: 1px solid #ececec;
  color: red;
  font-size: 14px;
  margin-left: 10px;
  height: 36px;
  line-height: 36px;
}

//弹窗信息
.weui-dialog__bd {
  height: 30px;
  line-height: 30px;
}

//修改默认按钮失效时背景颜色
.weui-btn_disabled.weui-btn_primary {
  background-color: #cfcfcf;
}
</style>
